import {createApp} from 'vue'
import App from '@/App.vue'
import router from '@/common/router/router'
import $kit from '@/common/util/Kit'
import $http from '@/common/util/http'
import $store from '@/common/store/_store'
import Vue3ColorPicker from "vue3-colorpicker";
//全局引入
import Antd, {message} from "ant-design-vue";
import emitter from 'tiny-emitter/instance'
import * as Icons from '@ant-design/icons-vue';
import '@/common/router/permission'
import 'nprogress/css/nprogress.css'
import 'ant-design-vue/dist/antd.less';
import '@/common/style/index.less'
import "vue3-colorpicker/style.css";


import messages from '@intlify/vite-plugin-vue-i18n/messages'
import {createI18n} from 'vue-i18n'

//fabric
import {fabric} from 'fabric'

//
//
//TODO 增加打包+1M(后期需要进行动态添加)
// for (const iconName in Icons) {
//     if (Reflect.has(Icons, iconName)) {
//         const item = Icons[iconName];
//
//         app.component(iconName, item)
//     }
// }
const app = createApp(App);
Object.keys(Icons).forEach(key => {
    app.component(key, Icons[key])
})

const $event = {
    $on: (...args) => emitter.on(...args),
    $once: (...args) => emitter.once(...args),
    $off: (...args) => emitter.off(...args),
    $emit: (...args) => emitter.emit(...args),
}
//
app.config.globalProperties.$icons = Icons
app.config.globalProperties.$http = $http
app.config.globalProperties.$store = $store
app.config.globalProperties.$message = message
app.config.globalProperties.$event = $event;
app.config.globalProperties.$kit = $kit

//错误信息
app.config.errorHandler = (err, vm, info) => {
    console.log('err', err)
    console.log('vm', vm)
    console.log('info', info)
}
//警告信息
app.config.warnHandler = function (msg, vm, trace) {
    // `trace` 是组件的继承关系追踪
    console.log('msg', msg)
    console.log('vm', vm)
    console.log('trace', trace)
}

let i18n = createI18n({
    locale: 'cn',
    legacy: false,
    globalInjection: true,
    messages
})
//TODO 放到统一指令.js中
app.directive('resize', {
    mounted(el, binding, vnode) {
        // 这里使用debounce防抖处理，防抖的延时时间可以通过自定义指令的参数传过来，如`v-resize:10`表示10ms延时
        // 也可以将此处延时去掉，放在绑定的函数中自定义
        function debounce(fn, delay = 1) {
            let t = null
            return function () {
                if (t) {
                    clearTimeout(t)
                }
                const context = this
                const args = arguments
                t = setTimeout(function () {
                    fn.apply(context, args)
                }, delay)
            }
        }

        el._resizer = new window.ResizeObserver(debounce(binding.value, Number(binding.arg) || 1))
        el._resizer.observe(el)
    },
    unmounted(el) {
        el._resizer.disconnect()
    },
})

app.use(Vue3ColorPicker)
app.use(i18n);
app.use(Antd);
app.use(router);
app.use(fabric);
app.mount('#app');
